<extend name="Public/base" />
<block name="title"><title>商品详情</title></block>


<block name="theme">
    
    <div class="breadcrumbs">
        <div class="container_12">
            <div class="grid_12">
                 <a href="index.html">首页</a><span></span><a href="#">产品类别</a><span></span><span class="current">详情</span>
            </div><!-- .grid_12 -->
        </div><!-- .container_12 -->
    </div><!-- .breadcrumbs -->
    <section id="main">
        <div class="container_12">
            <form action="{:U('Shopcart/index')}">
                <div id="content" class="grid_12">
                    <header>
                        <h1 class="page_title">{$shop.title}</h1>
                    </header>
                            
                    <article class="product_page">
                        <div class="grid_5 img_slid" id="products">
                            <img class="sale" src="/Public/Home/img/sale.png" alt="Sale">
                            <div class="preview slides_container">
                                <div class="prev_bg">
                                        <img  class="img3" src="{$shop.img}" alt="Product 1" width="380" height="380" title=""> 
                                </div>
                            </div><!-- .preview -->

                            <div class="next_prev">
                                <a id="img_prev" class="arows" href="#"><span>Prev</span></a>
                                <a id="img_next" class="arows" href="#"><span>Next</span></a>
                            </div><!-- .next_prev -->
                            
                            <ul class="small_img clearfix" id="thumblist">
                                <foreach name="img"  class="img1" item="vo">
                                    
                                        <li><a href="javascript:void(0)" title=""><img class="img2" src='{$vo}' alt=""></a></li>
                                    
                                </foreach>
                            </ul>

                            <div id="pagination"></div>
                        </div><!-- .grid_5 -->

                        <div class="grid_7">
                            <div class="entry_content">
                                <div class="soc">
                                    <img src="/Public/Home/img/soc.png" alt="Soc">
                                </div><!-- .soc -->

                                <div class="review">
                                    <a class="plus" href="#"></a>
                                    <a class="plus" href="#"></a>
                                    <a class="plus" href="#"></a>
                                    <a href="#"></a>
                                    <a href="#"></a>
                                    <span><strong>3</strong> 评论</span>
                                    <span class="separator">|</span>
                                    <a class="add_review" href="#">发表评论</a>
                                </div>

                                <h3>{$shop.title}</h3>
                                <h4><small>{$shop.des}</small></h4>

                                <div class="ava_price">
                                    
                                    <div class="price">
                                     <h3>价格:</h3><span id="totalPrice" class="pri">{$shop.price}</span>
                                    </div><!-- .price -->
                                    <input type="hidden" value="{$shop.price}" id="price" />

                                    <div class="clear"></div>
                                    <dt class="tb-property-type">数量</dt>
                                    <dd>
                                        <input type="button" class="opt" id="del" value="-"/>
                                        <input type="text" id="res" value="1"/>
                                        <input type="button" class="opt" id="add" value="+"/>
                                        <em>(库存<span id="J_SpanStock" class="tb-count">199</span>件)</em>
                                    </dd>
                                   <!--  <div class="availability_sku">
                                        <div class="availability">
                                        Availability: <span>In stock</span>
                                        </div>
                                        <div class="sku">
                                        SKU: <span>Candles OV</span>
                                        </div>
                                    </div> --><!-- .availability_sku -->

                                    

                                </div><!-- .ava_price -->




                                <div class="parameter_selection">
                                    <foreach name="attr" item="v">
                                        {$v.kname}
                                        <select id="option" class="select"> 
                                            <foreach name="v.val" item="vv">
                                                <option value="{$vv.id}">{$vv.vname}</option>
                                            </foreach>
                                        </select>
                                    </foreach>
                                </div><!-- .parameter_selection -->

                                <div class="cart">
                                    <a href="{:U('Shopcart/index')}" class="bay"><img src="/Public/Home/img/bg_cart.png" alt="Buy" title="">加入购物车</a>
                                    <a href="#" class="like"><img src="/Public/Home/img/like.png" alt="" title=""> 加入收藏</a>
                                    <a href="#" class="obn"><img src="/Public/Home/img/obl.png" alt="" title="">加入比较</a>
                                </div><!-- .cart -->

                            </div><!-- .entry_content -->
                        </div><!-- .grid_7 -->
          <div class="clear"></div>
                     
                    </article><!-- .product_page -->
                    
                        <div class="clear"></div>

                </div><!-- .grid_12 -->
            </form>
        </div><!-- .container_12 -->
    </section><!-- #main -->
    <div class="clear"></div>

</block>

<block name="script">
    <script>
        $(function(){
            $(".img2").click(function(){
                var a=$(this).attr("src");
                $(".img3").attr("src",a);
            });

            $('#del').click(function(){
                var v=$('#res').val();
                var p=$('#price').val();
                 console.log(v);
                 console.log(p);
                if(v==1){
                    $('#res').val(1);
                    $("#totalPrice").html(v*p);
                }else{
                    v--;
                    $('#res').val(v);
                    $("#totalPrice").html(v*p);
                }
            });
            $('#add').click(function(){
                var v=$('#res').val();
                var p=$('#price').val();
                console.log(v);
                console.log(p);
                if(v==199){
                    $('#res').val(199);
                }else{
                    v++;
                    $('#res').val(v);
                    $("#totalPrice").html(v*p);
                }
            });

            $("#res").keyup(function(){
                var v=$('#res').val();
                var p=$('#price').val();
                    if(isNaN($(this).val())||parseInt($(this).val())<1){
                    $(this).val("1");
                    $("#totalPrice").html($("#price").val());
                    return;
                    }
                  
                if(v==0||null||v>=200){
                    v=$('#res').val(1);
                    $("#totalPrice").html(p);
                }else{
                    var total=parseFloat($("#price").val())*parseInt($(this).val());
                    $("#totalPrice").html(v*p);
                }
                  
              
            })
              

            $("select").change(function(){
                var arr = new Array();
                var sid = "{$shop.id}";
                $.each($("select"),function(i,n){
                    arr.push($(n).val());
                });
                arr.sort(function(a,b){
                    return b-a;
                });

                $.ajax({
                  url: "{:U('price')}",
                  type:"POST",
                  data:{sid:sid,attrvid:arr},
                  success: function(html){
                     $('.pri').html(html.data);
                  }
                });
                console.log(arr);
                // $.post("{:U('price')}",{sid:sid,attrvid:arr},
                // function(msg){
                //     alert(111);
                //     $('.pri').html(msg.data.price);
                   
                // });
            });
        });
    </script>
</block>         